<template>
  <div class="bar-line-container">
    <div class="header">
      <h4 class="title">订单统计</h4>
      <filter-tabs
        :list="tabList"
        class="filter-tabs"
        @changeTab="changeTab"
      ></filter-tabs>
    </div>
    <div class="charts" ref="charts">123</div>
  </div>
</template>

<script>
import list from './data.json'
import * as echarts from 'echarts'
import filterTabs from './filter-tabs'
export default {
  name: 'bar-line-charts',
  data() {
    return {
      tabList: [
        { label: '本月', value: 'month' },
        { label: '本周', value: 'week' },
        { label: '本年', value: 'year' },
      ],
      activeTabValue: 'month',
    }
  },
  computed: {
    // x轴数据
    categoryArr() {
      const arr = []
      for (const key in list[this.activeTabValue].price) arr.push(key)
      return arr
    },
    // 柱状图数据
    barData() {
      const arr = []
      for (const key in list[this.activeTabValue].price)
        arr.push(list[this.activeTabValue].price[key])
      return arr
    },
    // 折线图数据
    lineData() {
      const arr = []
      for (const key in list[this.activeTabValue].quality)
        arr.push(list[this.activeTabValue].price[key])
      return arr
    },
  },
  methods: {
    initCharts() {
      this.charts = echarts.init(this.$refs.charts)

      this.charts.setOption({
        tooltip: {
          show: true,
          trigger: 'axis',
          formatter(params) {
            // 当前item项的信息
            let str = `${params[0].name}<br/>`
            params.forEach(
              item => (str += `${item.seriesName}:${item.value}<br/>`)
            )
            return str
          },
        },
        grid: {
          left: 10,
          right: 10,
          bottom: 20,
          top: 50,
          containLabel: true, // 偏移距离包含坐标轴上的文字
        },
        toolbox: {
          top: 10,
          right: 10,
          feature: {
            saveAsImage: {}, // 开启下载图片功能
            dataView: {}, // 开启数据视图，可以对数据进行修改
            restore: {}, // 开启恢复重置功能
          },
        },
        legend: {
          data: ['订单金额', '订单数'],
          // 图例偏移
          // left: 20,
          top: 10,
          // 图例的间距
          itemGap: 20,
        },
        xAxis: {
          type: 'category',
          data: this.categoryArr,
        },
        // 一个容器多个坐标轴
        yAxis: [
          {
            type: 'value',
            axisLine: {
              show: false,
            },
            // 显示刻度
            axisTick: {
              show: false,
            },
          },
          {
            type: 'value',
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
          },
        ],
        series: [
          {
            name: '订单金额',
            type: 'bar',
            data: this.barData,
            // 指定图表对应的坐标轴
            yAxisIndex: 0,
          },
          {
            name: '订单数',
            type: 'line',
            data: this.lineData,
            yAxisIndex: 1,
          },
        ],
      })
    },
    // 改变tab的回调
    changeTab(tab) {
      this.activeTabValue = tab.value
      this.charts.setOption({
        xAxis: { data: this.categoryArr },
        series: [{ data: this.barData }, { data: this.lineData }],
      })
    },
  },
  components: {
    filterTabs,
  },
  mounted() {
    this.initCharts()

    this.$bus.$on('changeCollapse', () => {
      this.$nextTick(() => {
        // 调整图形的大小
        this.charts.resize()
      })
    })

    this.$on('changeTab', this.changeTab)
  },
}
</script>

<style lang="scss" scoped>
.bar-line-container {
  width: 96.5%;
  margin-top: 15px;
  background-color: #f7f7f7;
  height: 330px;
  overflow: hidden;
  .header {
    width: 100%;
    height: 30px;
    .title {
      position: relative;
      float: left;
      padding-left: 10px;
      margin-left: 15px;
      margin-top: 10px;
      &::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
        width: 2px;
        height: 15px;
        background-color: #1890ff;
      }
    }
    .filter-tabs {
      float: right;
      margin-right: 15px;
      margin-top: 10px;
    }
  }
  .charts {
    margin-top: 10px;
    width: 100%;
    height: 300px;
  }
}
</style>
